<!--
 * @Description: 人像轨迹
 * @Author: 丁飞洋
 * @Date: 2025-09-10 15:36:03
 * @LastEditTime: 2025-11-14 22:53:45
 * @LastEditors: 丁飞洋
-->
<template>
  <!-- <BaseNode> -->
    <div class="person-trajectory">
      <!-- 搜索区域 -->
      <div class="search-header">
        <div class="search-item">
          <span class="search-label">搜索框：</span>
          <a-input 
            v-model:value="searchForm.keyword" 
            size="small" 
            placeholder="请输入关键词" 
            style="width: 200px;"
            @pressEnter="handleSearch"
          />
        </div>
        <div class="search-item">
          <span class="search-label">下拉多选：</span>
          <a-select
            v-model:value="searchForm.multipleSelect"
            mode="multiple"
            size="small"
            placeholder="请选择"
            style="width: 200px;"
            :options="selectOptions"
          />
        </div>
        <div class="search-item">
          <span class="search-label">时间选择：</span>
          <a-range-picker
            v-model:value="searchForm.timeRange"
            size="small"
            show-time
            :placeholder="['开始时间', '结束时间']"
            style="width: 300px;"
          />
        </div>
        <a-button type="primary" size="small" @click="handleSearch">查询</a-button>
      </div>

      <!-- 列表区域 -->
      <div class="content-area">
        <a-spin :spinning="loading">
          <template v-if="!loading && dataSource.length === 0">
            <a-empty description="暂无数据" />
          </template>
          <div v-else-if="dataSource.length > 0" class="grid-list">
            <div v-for="item in dataSource" :key="item.id || item.face_id" class="grid-item">
              <div class="photo-wrapper">
                <img 
                  v-if="(item.face_image_storage_path || item.photo) && !imageErrors[item.id || item.face_id]" 
                  :src="item.face_image_storage_path || item.photo"
                  class="photo"
                  alt="人员照片"
                  @error="(e) => handleImageError(e, item.id || item.face_id)"
                />
                <a-avatar 
                  v-else 
                  :size="120"
                  class="default-avatar"
                >
                  <template #icon>
                    <UserOutlined />
                  </template>
                </a-avatar>
              </div>
              <div class="info">
                <div class="info-item">
                  <span class="label">证件号码：</span>
                  <span class="value">{{ item.idCard || item.id_card || item.gmsfzhm || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">时间：</span>
                  <span class="value">{{ item.shot_time || item.time || item.createTime || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">地点：</span>
                  <span class="value">{{ item.sb_mc || item.location || item.address || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-area" v-if="dataSource.length > 0">
        <div class="pagination-info">
          <span>共 {{ pagination.total }} 条</span>
        </div>
        <a-pagination
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          :total="pagination.total"
          :show-size-changer="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="handlePageChange"
          @showSizeChange="handlePageSizeChange"
        />
      </div>
    </div>
  <!-- </BaseNode> -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";
// import BaseNode from "../Node/BaseNode.vue";

const node = ref({
  data: {
    idCard: ""
  }
});

// 首次加载
onMounted(() => {
  if (node.value && node.value.data && node.value.data.idCard) {
    searchForm.value.idCard = node.value.data.idCard;
  }
  fetchData();
});

// 加载状态
const loading = ref(false);

// 搜索表单
const searchForm = ref({
  keyword: "",
  multipleSelect: [],
  timeRange: [],
  idCard: "",
});

// 下拉选项（示例数据，可根据实际需求修改）
const selectOptions = ref([
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
]);

// 列表数据
const dataSource = ref([]);

// 图片加载错误记录
const imageErrors = ref({});

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
});

// 查询按钮点击
const handleSearch = () => {
  pagination.value.current = 1;
  fetchData();
};

// 分页改变
const handlePageChange = (page, pageSize) => {
  pagination.value.current = page;
  pagination.value.pageSize = pageSize;
  fetchData();
};

// 每页条数改变
const handlePageSizeChange = (current, size) => {
  pagination.value.current = 1;
  pagination.value.pageSize = size;
  fetchData();
};

// 图片加载错误处理
const handleImageError = (event, itemId) => {
  // 记录图片加载失败，触发重新渲染显示默认头像
  imageErrors.value[itemId] = true;
};

// 请求列表数据
const fetchData = () => {
  const params = {
    keyword: searchForm.value.keyword,
    multipleSelect: searchForm.value.multipleSelect,
    timeRange: searchForm.value.timeRange,
    idCard: searchForm.value.idCard,
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
  };

  loading.value = true;
  // 清空图片错误记录，重新加载数据时重新尝试加载图片
  imageErrors.value = {};
  
  // 这里需要根据实际的API接口进行调用
  // 示例：使用 chatApi.getRXGJ 或其他API
  // chatApi.getRXGJ(params)
  //   .then((res) => {
  //     loading.value = false;
  //     if (res.code == 200) {
  //       dataSource.value = res.result.records || res.result || [];
  //       pagination.value.total = res.result.total || res.total || 0;
  //     } else {
  //       message.error(res.msg || "获取数据失败");
  //       dataSource.value = [];
  //       pagination.value.total = 0;
  //     }
  //   })
  //   .catch((err) => {
  //     loading.value = false;
  //     message.error(err || "请求失败");
  //     dataSource.value = [];
  //     pagination.value.total = 0;
  //   });

  // 模拟数据（实际使用时请删除）
  setTimeout(() => {
    loading.value = false;
    
    // 生成模拟数据
    const mockData = [];
    const locations = [
      "北京市朝阳区建国路88号",
      "上海市浦东新区陆家嘴环路1000号",
      "广州市天河区天河路123号",
      "深圳市南山区科技园南路2号",
      "杭州市西湖区文三路259号",
      "成都市锦江区春熙路1号",
      "武汉市江汉区解放大道688号",
      "西安市雁塔区高新路1号",
      "南京市鼓楼区中山路321号",
      "重庆市渝中区解放碑步行街",
      "天津市和平区南京路219号",
      "苏州市工业园区星海街200号",
      "长沙市岳麓区麓山南路932号",
      "郑州市金水区花园路1号",
      "青岛市市南区香港中路8号"
    ];
    
    const totalCount = 48; // 总共48条数据
    const startIndex = (pagination.value.current - 1) * pagination.value.pageSize;
    const endIndex = Math.min(startIndex + pagination.value.pageSize, totalCount);
    
    for (let i = startIndex; i < endIndex; i++) {
      const id = i + 1;
      const date = new Date();
      date.setDate(date.getDate() - Math.floor(Math.random() * 30)); // 随机30天内的日期
      date.setHours(Math.floor(Math.random() * 24));
      date.setMinutes(Math.floor(Math.random() * 60));
      
      const timeStr = date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '-');
      
      // 生成18位身份证号（模拟）
      const idCard = `11010119${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}${String(Math.floor(Math.random() * 100)).padStart(2, '0')}`;
      
      mockData.push({
        id: id,
        face_id: `face_${id}`,
        face_image_storage_path: `https://picsum.photos/200/200?random=${id}`, // 使用占位符图片
        idCard: idCard,
        id_card: idCard,
        gmsfzhm: idCard,
        shot_time: timeStr,
        time: timeStr,
        createTime: timeStr,
        sb_mc: locations[Math.floor(Math.random() * locations.length)],
        location: locations[Math.floor(Math.random() * locations.length)],
        address: locations[Math.floor(Math.random() * locations.length)]
      });
    }
    
    dataSource.value = mockData;
    pagination.value.total = totalCount;
  }, 500);
};
</script>

<style scoped>
.person-trajectory {
  min-height: 260px;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 搜索区域 */
.search-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-label {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

/* 内容区域 */
.content-area {
  flex: 1;
  min-height: 300px;
}

/* 网格列表 */
.grid-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 16px;
  padding: 10px 0;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s;
}

.grid-item:hover {
  border-color: #1677ff;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}

/* 照片容器 */
.photo-wrapper {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.default-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  color: #999;
}

/* 信息区域 */
.info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
}

.info-item .label {
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
}

.info-item .value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

/* 分页区域 */
.pagination-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.pagination-info {
  font-size: 12px;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .grid-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .grid-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .search-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-item {
    width: 100%;
  }
  
  .pagination-area {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>
